import React, { Component } from 'react';
import './App.css';
import Input from './Components/Todo/Input'
import List from './Components/Todo/List';
import store from './store';


export default class App extends Component {


  componentWillMount() {
    store.subscribe(() => {
      this.setState({})
    })
  }


  addList(title) {
    store.dispatch({ type: 'addList', val: title })
  }

  editList(id, title) {
    store.dispatch({ type: 'editList', val: { id, title } })
  }

  delList(id) {
    store.dispatch({ type: 'delList', val: id })
  }

  isDone(id, isDone) {
    store.dispatch({ type: 'isDone', val: { id, isDone } })
  }




  render() {

    return (
      <div>
        <h2>Todo List Redux</h2>

        <Input addList={this.addList.bind(this)} ></Input>
        <List list={store.getState().list} isDone={this.isDone.bind(this)} editList={this.editList.bind(this)} delList={this.delList.bind(this)} ></List>

      </div>
    )
  }
}




